/* ------------------------------------------------------------------------------
*
*  # Footable
*
*  jQuery plugin that aims to make HTML tables on smaller devices look awesome.
*
*  Version: 1.0
*  Latest update: May 25, 2015
*
* ---------------------------------------------------------------------------- */

// Basic styling
// ------------------------------

.footable {
  width: 100%;

  // Remove user select
  > thead > tr > th {
    -webkit-touch-callout: none;
    .user-select(none);
  }

  // Setup table styles
  &.breakpoint {
    > tbody {
      > tr {
        &.footable-detail-show > td {
          border-bottom: 0;
        }

        // Remove background color from details row
        &.footable-row-detail:hover {
          background-color: transparent;
        }

        // Add pointer
        &:hover:not(.footable-row-detail) {
          cursor: pointer;
        }

        // Cell with details
        > .footable-cell-detail {
          background-color: @gray-lighter;
          border-top: 0;
        }

        // Add expand icon
        .footable-toggle:before {
          content: "\e9e4";
          display: inline-block;
          font-family: 'icomoon';
          font-size: @icon-font-size;
          vertical-align: middle;
          position: relative;
          top: -1px;
          line-height: 1;
          -webkit-font-smoothing: antialiased;
          -moz-osx-font-smoothing: grayscale;
          padding-right: 10px;
        }

        // Add collapse icon
        &.footable-detail-show .footable-toggle:before {
          content: "\e9e7";
        }
      }
    }
  }
}

// Row styling
// ------------------------------

.footable-row-detail-inner {
  display: table;
  table-layout: fixed;
  width: 100%;
}

.footable-row-detail-row {
  display: table-row;
}

.footable-row-detail-group {
  display: block;
  font-weight: 700;
  margin-top: @line-height-computed;
  margin-bottom: @padding-base-vertical;

  &:first-child {
    margin-top: @padding-base-vertical;
  }
}

.footable-row-detail-name {
  display: table-cell;
  padding-right: 40px;
  font-weight: 500;
}

.footable-row-detail-value {
  display: table-cell;
  padding: @padding-base-vertical 0;
}

// Make dropdown menus full width
@media (max-width: @screen-xs) {
  .footable-row-detail-inner {
    position: relative;
  }

  .footable-row-detail {
    .dropdown,
    .dropup,
    .btn-group {
      position: static;
    }

    .dropdown-menu {
      left: 0;
      right: 0;
    }
  }
}
